<template>
    <div class="app-tabs">
        <div class="dir-left-nowrap list" :class="['type-' + props.type]">
            <div class="inline-flex main-center cross-center item"
                :class="[props.full ? 'box-grow-1' : 'box-grow-0', { 'active': props.value === item.name },]"
                :data-name="item.name" v-for="item in props.list" :key="item.name" @click="change(item.name)">
                <slot name="tab" :tab="item">
                    <span class="text">{{ item.title }}</span>
                </slot>
                <div class="adorn"></div>
            </div>
        </div>
        <div class="adorn-line" v-if="props.type === 'line'"></div>
    </div>
</template>

<script setup lang="ts" name="AppTabs">

/**
 * AppTabs标签页组件
 */

export type AppTabItem = {
    title: string,
    name: string,
}

export type AppTabsProps = {
    /**样式类型 */
    type?: 'bar' | 'line' | 'card',
    /**标签页列表 */
    list: AppTabItem[],
    /**当前选中的标签页 */
    value?: AppTabItem['name'],
    /**是否撑满元素宽度 */
    full?: boolean,
    /**尺寸 */
    size?: 'small' | 'medium' | 'large',
    /**切换标签使用a标签跳转,启用后@update:value失效 */
    // aMode?: boolean,
    /**a标签模式是true时启用,切换标签将在页面路由上添加参数如: http://xxx.com?[akey]=[AppTabItem['name']] ,当页面刷新时组件将根据aKey的值选中对应标签*/
    // aKey: string
}

const props = withDefaults(defineProps<AppTabsProps>(), {
    type: 'bar',
    value: '',
    full: true,
    size: 'medium',
    aMode: false,
    aKey: 'tab'
})

const emit = defineEmits<{
    /**切换标签页时触发 */
    'update:value': [AppTabItem['name']]
}>()

/**切换 */
function change(name: string) {
    emit('update:value', name)
}


</script>

<style lang='scss' scoped>
.app-tabs {
    position: relative;
    background-color: #fff;

    .list {
        padding: 0 10px;

        .item {
            cursor: pointer;
            position: relative;

            .adorn {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 2px;
                transform: scaleX(0);
                transition: transform .2s ease-in-out;
            }

            &.active {
                // font-weight: bold;

                .adorn {
                    transform: scaleX(1);
                }
            }
        }

        &.type {
            &-bar {
                gap: 10px;

                .item {
                    height: 40px;
                    font-size: 16px;

                    &.active {
                        color: #19191A;
                    }

                }

                .adorn {
                    background-color: #FF9B00;
                }
            }

            &-line {
                gap: 10px;

                .item {
                    height: 40px;
                    font-size: 16px;

                    &.active {
                        color: #19191A;
                    }

                }

                .adorn {
                    background-color: #FF9B00;
                }
            }

            &-card {
                position: relative;
                gap: 0;
                padding: 0;
                background-color: #fff;
                border-radius: 8px;
                border: 1px solid #D8D8D8;

                .item {
                    height: 40px;
                    font-size: 16px;

                    &.active {
                        color: #fff;
                    }

                }

                .text {
                    position: relative;
                    z-index: 1;
                }

                .adorn {
                    top: 0;
                    left: 0;
                    height: 100%;
                    border-radius: 8px;
                    background: linear-gradient(180deg, #9DCBFF 0%, #C4E0F9 100%);
                    transition: transform 0s;
                }
            }
        }
    }

    .adorn-line {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #E5E5E5FF;
    }

}
</style>